<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head th:include="public/page_css::page_css ('新增质检规则')" />
<link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/css/font/iconfont.css}" media="all"/>
<link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/js/layui/css/layui.css}" media="all"/>
<link rel="stylesheet" type="text/css" th:href="@{/css/main.css}" media="all"/>
<body>
<div class="layui-fluid larry-wrapper">
    <div class="layui-row layui-col-space30">
        <div class="layui-col-xs24">
            <section class="panel panel-padding">
                <div style="padding: 0 4rem;">
                <form id="form1" class="layui-form layui-form-pane" action="">
                    <div>&nbsp;</div>
                    <div class="layui-form-item" >
                        <label class="layui-form-label">规则名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="mc" placeholder="规则名称"  autocomplete="off" class="layui-input" style="width:300px"/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">质检方式</label>
                        <div class="layui-input-block" style="width:300px">
                            <select id="fs" name="fs" lay-filter="filter">
                                <option value="0">全检</option>
                                <option value="1">百分比抽检</option>
                                <option value="2">固定数量抽检</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item" id="zjmx">
                        <div class="layui-inline">
                            <label class="layui-form-label">起始数量</label>
                            <div class="layui-input-inline">
                                <input type="text" name="qssl" id="qssl" placeholder="起始数量" autocomplete="off" class="layui-input "/>
                            </div>
                        </div>
                        <div hidden><input type="text" name="sx" id="sx"/></div>
                        <div class="layui-inline">
                            <label class="layui-form-label">结束数量</label>
                            <div class="layui-input-inline">
                                <input type="text" name="jssl" id="jssl" placeholder="结束数量" autocomplete="off" class="layui-input "/>
                            </div>
                        </div>
                        <div class="layui-form-item" style="margin: 1rem 0;position: absolute;top: 6.5rem;right: 10%;">
                            <div class="layui-input-block">
                                <a class="layui-btn" lay-submit id="addDetail">添加</a>
                            </div>
                        </div>
                        <div id="bltable">
                            <div class="layui-inline">
                                <label class="layui-form-label">抽检比例(1-100%)</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="bfb" id="bfb" placeholder="抽检比例" autocomplete="off" class="layui-input "/>
                                </div>
                            </div>
                            <section class="panel panel-padding layui-card-body" id="table1div" >
                                <div class="pro">
                                    <table id="table1">
                                    </table>
                                </div>
                            </section>
                        </div>

                        <div id="gdtable">
                            <div class="layui-inline">
                                <label class="layui-form-label">固定数量</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="gdsl" id="gdsl"  placeholder="固定数量" autocomplete="off" class="layui-input "/>
                                </div>
                            </div>
                            <section class="panel panel-padding layui-card-body" id="table2div" >
                                <div class="pro">
                                    <table id="table2">
                                    </table>
                                </div>
                            </section>
                        </div>
                    </div>


                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" jq-filter="submit" lay-submit="" lay-filter="addZjgz">立即提交</button>
                           <!-- <button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
                        </div>
                    </div>
                </form>
                </div>
            </section>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" th:src="@{/plugin/layui/js/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{/plugin/layui/js/version.js}"></script>
<script th:src="@{/plugin/layui/js/common.js}"></script>

<div th:include="public/public_js::public_js"></div>
<style type="text/css">
    #table1div{
        display: none;
    }

    #table2div{
        display: none;
    }

    #zjmx{
        display: none;
    }
</style>
<script>
    /*layui.use(['myform','zzpUtils','form','jquery'],function () {*/
    layui.use(['list','layer','zzpUtils','jquery','laydate'],function () {
        window.operateEvent = {
            //删除
            "click .delete": function (e, value, row, index) {//删除清单
                var tabledata = $table1.bootstrapTable('getData');
                console.info("删除行");
                var jssl = [];
                jssl.push(row.jssl);
                console.log(row);
                $table1.bootstrapTable('remove', {field: 'jssl', values: jssl});
                $table1.bootstrapTable('load', tabledata);
            },
            //删除
            "click .delete2": function (e, value, row, index) {//删除清单
                var tabledata = $table2.bootstrapTable('getData');
                console.info("删除行");
                var id = [];
                id.push(row.jssl);
                $table2.bootstrapTable('remove', {field: 'jssl', values: id});
                $table2.bootstrapTable('load', tabledata);
            },
        }

        var form = layui.form,
            zzpUtils = layui.zzpUtils,
            $ = layui.jquery;

        var index = 1;
        form.on('select(filter)', function (data) {
            var select = data.value;
            if (select == 1) {
                $('#table1div').css('display', 'block');
                $('#table2div').css('display', 'none');
                $('#bltable').css('display', 'block');
                $('#gdtable').css('display', 'none');
                $('#zjmx').css('display', 'block');
            }
            if (select == 2) {
                $('#table2div').css('display', 'block');
                $('#table1div').css('display', 'none');
                $('#gdtable').css('display', 'block');
                $('#bltable').css('display', 'none');
                $('#zjmx').css('display', 'block');
            }
            if (select == 0) {
                $('#zjmx').css('display', 'none');
                $('#table1div').css('display', 'none');
                $('#table2div').css('display', 'none');
                $('#gdtable').css('display', 'none');
                $('#bltable').css('display', 'none');
            }
        });


        form.on("submit(addZjgz)",function (data) {
            var formdata = data.field;
            var mc=formdata.mc;
            var fs=formdata.fs;
            var sx=formdata.sx;
            var jssl=formdata.jssl;
            var qssl=formdata.qssl;
            var bfb=formdata.bfb;
            var gdsl=formdata.gdsl;
            var tabledata;
            if (fs == 1) {
                tabledata = $table1.bootstrapTable('getData');
            }
            if (fs == 2) {
                tabledata = $table2.bootstrapTable('getData');
            }
            if (fs == 0) {
                tabledata = $table2.bootstrapTable('getData');
            }
            var detailedList = [];
            tabledata.forEach(function (item) {
                var ddata = {};
                for (key in item) {
                    if (key !== '') {
                        ddata[key] = item[key];
                    }
                }
                detailedList.push(ddata);
            });
            var query={
                mc:mc,
                fs:fs,
                detailedList:detailedList
            }
            //console.log('queryquery', query);
                zzpUtils.confirm("是否确定添加", function (index) {
                    zzpUtils.action({
                            url: "/wmsqualitytesting/add",
                            data: JSON.stringify(query),
                            success: function (data) {
                                setTimeout(function () {
                                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                    parent.layer.close(index);
                                    //再执行关闭
                                    top.layer.msg(
                                        data.title
                                    );
                                }, 500);
                            }, error: function (xhr, textStatus) {
                                console.log(textStatus);
                                console.log(xhr);
                            }
                        }
                    )
                })
                return false;
            });

        /*window.operateEvent ={
            //行内删除
            "click #delete": function (e, value, row, index) {
                console.log('触发了删除', row, value);
                var ids = [];
                ids.push(row.id);
                var data = {'ids': ids};
                $.ajax({
                   // url: '/zxsswms/wmspacking/deleteStacking',
                    type: 'POST',
                    dataType: 'json',
                    data: JSON.stringify(data),
                    contentType: 'application/json',
                    success: function (data) {
                        layer.msg(data.title);
                        blanktable.bootstrapTable('refresh');
                    },
                    error: function (err) {
                        console.log(err);
                    }
                })
            },


            "click .delete": function (e, value, row, index) {//删除清单
                var tabledata = $table.bootstrapTable('getData');
                console.info("删除行");
                var id = [];
                id.push(row.id);
                $table.bootstrapTable('remove', {field: 'id', values: id});
                $table.bootstrapTable('load', tabledata);
            },
        }*/
        /*function operateFormatter(value, row, index) {
            return [
                '<a class="layui-btn layui-btn-danger layui-btn-xs  delete">删除</a>'
            ].join('')
        }*/

        var $table1 = zzpUtils.table({
            elem: '#table1',
            isApi: true,
            pagination: false,
            columns: [{
                field: '',
                checkbox: true,
            },{
                field: 'sx',
                title: '序号',
            },{
                field: 'qssl',
                title: '起始数量'
            }, {
                field: 'jssl',
                title: '结束数量'
            },{
                field: 'bfb',
                title: '抽检比例',
                formatter: function (value, rowData, rowIndex) {
                    if (value && value != 0) {
                        return parseFloat(value) + '%';
                    } else {
                        return "0";
                    }
                    ;
                },
            },{
                field:'caozuo',
                title: '操作',
                events:operateEvent,
                formatter:operateFormatter
            }],
        });

        var $table2 = zzpUtils.table({
            elem: '#table2',
            isApi: true,
            pagination: false,
            columns: [{
                field: '',
                checkbox: true,
            }, {
                field: 'sx',
                title: '序号',
            },{
                field: 'qssl',
                title: '起始数量'
            }, {
                field: 'jssl',
                title: '结束数量'
            }, {
                field: 'gdsl',
                title: '固定数量'
            },{
                field:'caozuo',
                title: '操作',
                events:operateEvent,
                formatter:operateFormattert
            }]
        });


        function operateFormatter(value, row, index) {
            return [
                '<a class="layui-btn layui-btn-xs layui-btn-radius layui-btn-warm  delete" >删除</a>'

            ].join('')
        }
        function operateFormattert(value, row, index) {
            return [
                '<a class="layui-btn layui-btn-xs layui-btn-radius layui-btn-warm  delete2" >删除</a>'

            ].join('')
        }


        //添加质检明细
        $('#addDetail').click(function () {
            var values = $('#zjmx input[type="text"]');
            var datas = {};
            for (var ii = 0; ii < values.length; ii++) {
                var item = values[ii];
                datas[item.name] = item.value;
                $("#" + item.id).val('');
            }
            var datacopy = {};
            datacopy['qssl'] = datas['qssl'];
            datacopy['jssl'] = datas['jssl'];
            datacopy['bfb'] = datas['bfb'];
            datacopy['gdsl'] = datas['gdsl'];
            datacopy['id'] = 0;
            datacopy['sl'] = '';
            if ($('#fs').val() == 1) {
                var tabledata = $table1.bootstrapTable('getData');
                var lendata = tabledata[tabledata.length-1];
                if (tabledata.length === 0) {
                    var qssl = parseInt(datacopy['qssl']);
                    var jssl = parseInt(datacopy['jssl']);
                    var bfb=parseInt(datacopy['bfb']);
                    if(qssl <= jssl){
                        if( bfb >0 && bfb <100){
                            datacopy['sx'] = index;
                            $table1.bootstrapTable('append', datacopy);
                        }else {
                            layer.msg('抽检比例 介于0和100之间');
                        }
                    }else {
                        layer.msg('起始数量 不能大于 结束数量');
                    }
                } else {
                    var qssl = parseInt(datacopy['qssl']);
                    var jssl = parseInt(datacopy['jssl']);
                    var lastJssl=parseInt(lendata.jssl);
                    if (qssl >= lastJssl) {
                        if (qssl <= jssl) {
                            if (datacopy['bfb'] > 0 && datacopy['bfb'] < 100) {
                                datacopy['sx'] = index + 1;
                                $table1.bootstrapTable('append', datacopy);
                            } else {
                                layer.msg('抽检比例 介于0和100之间');
                            }
                        } else {
                            layer.msg('起始数量 不能大于 结束数量');
                        }
                    } else {
                        layer.msg('输入的起始数量要大于前一条的结束数量！');
                    }

                }
            }
            if ($('#fs').val() == 2) {
                var tabledata2 = $table2.bootstrapTable('getData');
                var lendata2 = tabledata2[tabledata2.length-1];
                //本次输入起始数量
                var qjcha =datacopy['jssl']-datacopy['qssl'];
                if (tabledata2.length === 0) {
                    var qssl = parseInt(datacopy['qssl']);
                    //本次输入的结束数量
                    var jssl = parseInt(datacopy['jssl']);
                    var gdsl = parseInt(datacopy['gdsl']);
                    if(qssl <= jssl){
                        if( gdsl <= qjcha){
                            datacopy['sx'] = index;
                            $table2.bootstrapTable('append', datacopy);
                        }else {
                            layer.msg('固定数量 不能大于 结束数量减去起始数量的值:'+qjcha);
                        }
                    }else {
                        layer.msg('起始数量 不能大于 结束数量');
                    }
                }else {
                    var qssl = parseInt(datacopy['qssl']);
                    //上条数据的结束数量
                    var jsslLast = parseInt(lendata2.jssl);
                    //本次输入的结束数量
                    var jssl = parseInt(datacopy['jssl']);
                    var gdsl = parseInt(datacopy['gdsl']);
                    if (qssl >= jsslLast) {
                        if(qssl <= jssl){
                            if( gdsl <= qjcha){
                                datacopy['sx'] = index + 1;
                                $table2.bootstrapTable('append', datacopy);
                            }else {
                                layer.msg('固定数量 不能大于 结束数量减去起始数量的值:'+qjcha);
                            }
                        }else {
                            layer.msg('起始数量 不能大于 结束数量');
                        }
                    } else {
                        layer.msg('输入的起始数量要大于前一条的结束数量！');
                    }
                }
            }

        })

    });
</script>
</html>